/*
 * Script to display the AddEdgeForm
 * 
 * Author: Chris Casola
 */

(function() {
	
	/**
	 * Displays the AddEdgeForm on the page
	 */
	function AddEdgeForm(appFrame) {
		this.frame = appFrame;
		
		window.choicePositions = [];
		
		this.displayForm = function() {
			var content = "<section id='addEdgeForm'>" +
							"<h1>Question goes here</h1>" +
                        	"<p>Click between two vertical lines to add a new edge.</p>" +
                        	"<p id='currentRound'>Round: 1</p>" +
                        	"<p id='turnStatus'></p>" +
                        	"<table id='choicesTable'></table>"+
                        	"<canvas id='edgeCanvas' width='700' height='500'></canvas>" +
                        	"</section>";
			return content;
		};
		
		/**
		 * Places the choice labels on the page
		 */
		this.initChoiceTable = function(){
			var table = document.getElementById('choicesTable');
			var newRow = document.createElement("tr");
			var i;
			var cells = new Array();
			var numChoices = window.dlEvent.numChoices;
			var choices = window.dlEvent.choices;
			
			for(i=0;i<numChoices;i++){
				cells[i] = document.createElement("td");
				cells[i].innerHTML = choices[i].label;
				cells[i].style.width = (700/(numChoices-1))+"px";
				newRow.appendChild(cells[i]);
			};
			table.appendChild(newRow);
			table.style.width = 700+(700/(numChoices-1))+"px";
		};
	
		/**
		 * Initialize the edge canvas, including drawing the choice lines
		 * and adding the click event listener.
		 */
		this.initCanvas = function () {
			document.getElementById('addEdgeForm').children[0].innerHTML = window.dlEvent.question;
			document.getElementById('addEdgeForm').children[2].innerHTML = "Round: " + window.dlEvent.currentRound;
			
			var canvas = document.getElementById('edgeCanvas');
    		this.context = canvas.getContext("2d");
		    
		    var canvasHeight = canvas.height;
		    var canvasWidth = canvas.width;
		    
		    this.computeLineLocations(canvasWidth);
		    this.drawLines('green', canvasHeight);
		    
		    canvas.addEventListener("click", AddEdgeController, false);
		};
		
		/**
		 * Draw the given Edge
		 */
		this.drawEdge = function (lineColor, leftChoice, vPos) {
			this.context.strokeStyle = lineColor;
			this.context.lineWidth = 3;
			
			this.context.beginPath();
			this.context.moveTo(window.choicePositions[leftChoice], vPos);
			this.context.lineTo(window.choicePositions[leftChoice + 1], vPos);
			this.context.stroke();
		};
		
		/**
		 * Helper function called by initCanvas that draws the lines
		 * on the canvas.
		 */
		this.drawLines = function(lineColor, canvasHeight) {
			this.context.strokeStyle = lineColor;
			this.context.lineWidth = 3;
	
			var i;
			for (i=0; i < window.choicePositions.length; i++) {
				this.context.beginPath();
				this.context.moveTo(window.choicePositions[i], 0);
				this.context.lineTo(window.choicePositions[i], canvasHeight);
				this.context.stroke();
			}
		};
		
		/**
		 * Generates an alert containing the result of the game
		 */
		this.showResult = function (gameResult) {
			alert(gameResult.toString);
		};
		
		/**
		 * Computes the proper locations on the canvas to draw the choice
		 * lines so that they are evenly spaced.
		 */
		this.computeLineLocations = function(canvasWidth) {
			var numLines = window.dlEvent.choices.length;
			numLines -= 2; /* will draw the left-most and right-most lines separately */
			
			window.choicePositions.push(1.5);
					
			var dx = canvasWidth / (numLines + 1);
			var currXPos = 1.5;
			
			while (numLines > 0) {
				currXPos += dx;
				window.choicePositions.push(currXPos);
				numLines--;
			}
			
			window.choicePositions.push(canvasWidth - 1.5);
		};
	}
	
	window.AddEdgeForm = AddEdgeForm;
}).call();
